<template>
  <div class="applyProgress">
    <div class="applyProgressBg"></div>
    <div class="progressTitle">申请进度</div>
    <img
      src="./applyDetail/daikuanshouli_icon.png"
      alt=""
      class="progressIcon"
    />   
    <div class="progressText">
      <div>客户申请</div>
      <div>贷款受理</div>
      <div>签约中</div>
      <div>签约完成</div>
      <div>申请完成</div>
    </div>

    <div class="loanNumArea" v-if="applyDetail.finalLimit">
      <img src="./applyDetail/shouxingedu.png" alt="" class="loanBg" />
      <div class="numAreaTitle">授信额度(元)</div>
      <div class="loanNum">{{ applyDetail.finalLimit }}</div>
    </div>
    <div
      class="loanContractSign"
      v-if="applyDetail.finalLimit"
      @click="signLoanContract"
    >
      借款合同签约
    </div>

    <div class="contractState" v-if="applyDetail.loanContractStatus">
      <img src="./applyDetail/jiekuanhetong_bg.png" alt="" class="contractBg" />
      <div class="contractTitle">借款合同</div>
      <div class="signContract">
        <div class="signName">
          借款人姓名：<span>{{ applyDetail.custName }}</span>
        </div>
        <img src="./applyDetail/sign.png" alt="" class="signState" />
      </div>
    </div>
    <div
      class="contractState"
      v-if="applyDetail.guarantorInfoList"
      v-for="item in applyDetail.guarantorInfoList"
      :key="item.guarantorName"
    >
      <img
        src="./applyDetail/jiekuanhetong_bg.png"
        alt=""
        class="contractBg"
        v-if="item.guarantorContractStatus === '1'"
      />
      <img
        src="./applyDetail/danbaohetong_bg.png"
        alt=""
        class="contractBg"
        v-else
      />
      <div class="contractTitle">担保合同</div>
      <div class="signContract">
        <div class="signName">
          担保人姓名：<span>{{ item.guarantorName }}</span>
        </div>
        <img
          src="./applyDetail/sign.png"
          alt=""
          class="signState"
          v-if="item.guarantorContractStatus === '1'"
        />
        <img src="./applyDetail/unsign.png" alt="" class="signState" v-else />
      </div>
    </div>
    <div class="bottomSitting">底部占位</div>
  </div>
  <div class="infoTitle">基本信息</div>
  <div class="infoArea">
    <div class="infoItem">
      <div class="itemTitle">申请人姓名</div>
      <div class="itemValue">{{ applyDetail.custName }}</div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">性别</div>
      <div class="itemValue">
        {{
          applyDetail.sex === "0"
            ? "女"
            : applyDetail.sex === "1"
            ? "男"
            : "未知"
        }}
      </div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">身份证</div>
      <div class="itemValue">{{ applyDetail.cardNo }}</div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">签发机关</div>
      <div class="itemValue">{{ applyDetail.authority }}</div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">有效日期</div>
      <div class="itemValue">{{ applyDetail.validDate }}</div>
    </div>
    <div class="infoItem">
      <div class="itemTitle">贷款用途</div>
      <div class="itemValue">
        {{ applyDetail.loanUse === "20205" ? "综合消费" : "" }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
const applyDetail = reactive({});
onLoad((options) => {
  let orderId = JSON.parse(options.value);
  http.applyDetail({ orderId }).then((res) => {
    if (res.code == 200) {
      applyDetail.custName = res.data.custName;
      applyDetail.sex = res.data.sex;
      applyDetail.cardNo = res.data.cardNo;
      applyDetail.authority = res.data.authority;
      applyDetail.validDate = res.data.validDate;
      applyDetail.loanUse = res.data.loanUse;
      applyDetail.orderExecStatus = res.data.orderExecStatusList;
      applyDetail.loanContractStatus = res.data.loanContractStatus;
      applyDetail.finalLimit = res.data.finalQuota||res.data.approvalQuota||res.data.proposalCreditQuota||res.data.preCreditQuota||'';
      if (res.data.guarantorInfoList) {
        applyDetail.guarantorInfoList.push(...res.data.guarantorInfoList);
      }
    }
  });
});
// 借款合同签约
const signLoanContract = () => {};
</script>

<style scoped lang="scss">
.applyProgress {
  position: relative;
  .applyProgressBg {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -99999;
  }
  .progressTitle {
    padding: 48rpx 50rpx;
    padding-bottom: 37rpx;
  }
  .progressIcon {
    width: 644rpx;
    height: 38rpx;
    margin: 0 53rpx;
  }
  .progressText {
    margin: 0 29rpx;
    padding-bottom: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .loanNumArea {
    margin: 0 149rpx;
    height: 329rpx;
    position: relative;
    .loanBg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: -9999;
    }
    .numAreaTitle {
      padding-top: 119rpx;
      text-align: center;
      font-size: 28rpx;
    }
    .loanNum {
      margin-top: 10rpx;
      height: 126rpx;
      line-height: 126rpx;
      text-align: center;
      font-size: 90rpx;
      color: #4d79dd;
    }
  }
  .loanContractSign {
    margin: 0 175rpx;
    margin-top: 37rpx;
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    background-image: linear-gradient(to right, #619df1, #37bdfe);
    color: #ffffff;
    font-size: 32rpx;
  }
  .bottomSitting {
    height: 50rpx;
    opacity: 0;
  }
  .contractState {
    width: 618rpx;
    height: 128rpx;
    margin: 0 66rpx;
    margin-bottom: 28rpx;
    position: relative;
    .contractBg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -9999;
    }
    .contractTitle {
      color: #ffffff;
      padding-left: 15rpx;
      padding-top: 3rpx;
      height: 33rpx;
      line-height: 33rpx;
    }
    .signContract {
      margin: 0 33rpx;
      margin-top: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .signName {
        color: #333;
        font-size: 28rpx;
      }
      .signState {
        width: 139rpx;
        height: 48rpx;
      }
    }
  }
}
.infoTitle {
  padding-left: 19rpx;
  padding-top: 20rpx;
  padding-bottom: 10rpx;
}
.infoArea {
  background-color: #fff;
  padding: 0 57rpx;
  .infoItem {
    height: 87rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
    }
    .itemValue {
      color: #333333;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
